<template>
    <div>
        <van-address-edit :address-info="info" :area-list="areaList" show-postal show-delete show-set-default
            show-search-result :area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete" />
    </div>
</template>

<script>
import { getAddressDetail, addAddress, updateAddress } from "../../api/index.js"
import { areaList } from '@vant/area-data';
export default {
    name: "AddressEdit",
    props: [],
    created() {
        // this是vc 把id挂载到this上，其它地方也可以获取id
        this.id = this.$route.query.addressId
        if (this.id) {
            // 是点击编辑过来的
            // console.log("编辑...");
            // 获取地址详情，实现数据回显
            this.getDetail();
        }
    },
    data() {
        return {
            areaList: Object.freeze(areaList),
            info: {}, // 实现数据回显
        };
    },
    methods: {
        // 根据地址，得到地区编码
        getAreaCode(area) {
            area = area.replace(/区|县/, "");
            for (let k in areaList.county_list) {
                if (areaList.county_list[k].includes(area)) {
                    return k;
                }
            }
        },
        // 点击保存
        onSave(obj) {
            console.log(obj);
            let { addressDetail, areaCode, city, country, county, id, isDefault, name, postalCode, province, tel,
            } = obj;

            let option = {
                "cityName": city,
                "defaultFlag": isDefault ? 1 : 0,
                "detailAddress": addressDetail,
                "provinceName": province,
                "regionName": county,
                "userName": name,
                "userPhone": tel,
                "areaCode": areaCode,
                "postalCode": postalCode
            }

            if (this.id) {
                // 点击编辑进来的，点击保存，实现编辑
                // 编辑也需要把地址ID也传递给后端
                updateAddress({
                    addressId: this.id,
                    ...option
                }).then(() => {
                    this.$router.push("/addressList")
                })
            } else {
                // 点击添加进来的，点击保存，实现添加
                addAddress({ ...option }).then(() => {
                    this.$router.push("/addressList")
                })
            }
        },
        // 点击删除
        onDelete() {

        },
        async getDetail() {
            // 根据ID请求地址详情
            let data = await getAddressDetail(this.id)
            // console.log("data===>", data);
            let {
                addressId,
                cityName,
                defaultFlag,
                detailAddress,
                provinceName,
                regionName,
                userId,
                userName,
                userPhone,
            } = data.data;
            this.info = {
                id: addressId,
                name: userName,
                tel: userPhone,
                province: provinceName,
                city: cityName,
                county: regionName,
                addressDetail: detailAddress,
                postalCode: "100000",
                // 给你一个地址，需要得这个地区的编码
                areaCode: this.getAreaCode(regionName),
                isDefault: defaultFlag ? true : false,
            };
            console.log(this.info);
        }
    },
};
</script>

<style lang="less" scoped>
/deep/.van-switch--on {
    background-color: #fa1919;
}
</style>